<template>
  <div class="c-nav">
    <avue-tree red="tree"
               :option="option"
               :loading="loading"
               :data="treeData"
               :expand-on-click-node="false"
               @node-click="nodeClick"
               v-model="form">
      <span class="el-tree-node__label" slot-scope="{ node, data }">
        <span>
          <i v-if="data.icon" :class="data.icon"></i>
          {{ (node || {}).label }}
        </span>
      </span>
    </avue-tree>
  </div>
</template>

<script>
export default {
  name: 'containerNav',
  props: {
    treeData: {
      type: Array,
      request: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    setLabelId: {
      type: Object
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {}
    }
  },
  computed: {
    option () {
      return {
        defaultExpandAll: true,
        menu: true,
        filter: false,
        props: this.setLabelId
      }
    }
  },
  methods: {
    nodeClick (data) {
      this.$emit('handleNodeClick', data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .c-nav {
    min-height: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    padding-top: 15px;
    ::v-deep .avue-tree{
      height: calc(100vh - 100px);
    }
    ::v-deep .avue-tree__content{
      background: #fff;
      padding: 0;
    }
  }
</style>
